<template>
    <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>标题</span>
      </div>
    </template>
    <div>
       <el-form :model="form" :rules="formRules" ref='formRef' label-width="120px">
        <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="年龄" prop="age">
            <el-input v-model="form.age" />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
            <el-select v-model="form.sex" placeholder="请选择性别">
                <el-option label="男" value="男" />
                <el-option label="女" value="女" />
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
            <el-button @click="onRest">重置</el-button>
        </el-form-item>
    </el-form>

    </div>
  </el-card>

    <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>标题</span>
      </div>
    </template>
    <div>
        <el-form :model="Passform" :rules="PassFormRules" label-width="120px">
            <el-form-item label="新密码" prop="new_password">
                <el-input v-model="Passform.new_password" />
            </el-form-item>
            <el-form-item label="确认新密码" prop="confirm_password">
                <el-input v-model="Passform.confirm_password"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">提交</el-button>
                <el-button @click="onRest">重置</el-button>
            </el-form-item>
        </el-form>

    </div>
  </el-card>


</template>

<script>
    export default {
        name: "A",
        data() {
            // 自定义效验规则
            const checkNewOldPassword = (rule, value, callback) => {
              if (value != this.Passform.new_password ) {
                  callback(new Error('两次输入密码不一致！'))
              } else {
                  return callback();
              }
            };

            return {
                form: {
                    name: '',
                    age: '',
                    sex: ''
                },
                formRules: {
                    name: [
                        {required: true, message: '请输入姓名', trigger: 'blur'},
                        {min: 2, max: 5, message: '长度在2到5个字符', trigger: 'blur'}
                    ],
                    age: [
                        {required: true, message: '请输入年龄', trigger: 'blur'},
                    ],
                    sex: [
                        {required: true, message: '请输入年龄', trigger: 'blur'},
                    ]
                },
                Passform: {
                    new_password: '',
                    confirm_password: ''
                },
                PassFormRules: {
                    new_password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                    ],
                    confirm_password: [
                        {required: true, message: '请确认新密码', trigger: 'blur'},
                        {validator: checkNewOldPassword, trigger: 'blur'}
                    ],
                }
            }
        },
        methods: {
            onSubmit() {
                this.$refs.formRef.validate((valid) => {
                    if(valid) {  // 如果valid为true说明表单效验满足
                        console.log(this.form)
                    } else {
                        console.log('表单格式错误！')
                    }
                })

            },
            onRest() {
                this.$refs.formRef.resetFields();
            }
        }
    }
</script>

<style scoped>

</style>